﻿@page "/stepss"

<h3>Steps 步骤条</h3>

<h4>引导用户按照流程完成任务的导航条</h4>

<p>引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步</p>

<p><code>Steps</code> 组件支持通过设置 <code>Items</code> 属性或者直接内嵌 <code>Step</code> 组件两种方式进行 UI 呈现</p>

<Block Title="基础用法" Introduction="简单的步骤条，通过直接绑定数据源 <code>Items</code> 即可" CodeFile="step.1.html">
    <Steps Items="@Items" OnStatusChanged="@OnStatusChanged" />
    <div class="mt-1">
        <Button OnClick="@NextStep" IsOutline="true">下一步</Button>
        <Button OnClick="@ResetStep" IsOutline="true">重 置</Button>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="基础用法" Introduction="简单的步骤条，组件内部直接使用 <code>Step</code> 组件设置步骤" CodeFile="step.2.html">
    <Steps>
        <Step Title="步骤一" Space="25%" Status="StepStatus.Success"></Step>
        <Step Title="步骤二" Space="25%" Status="StepStatus.Process" StepIndex="1"></Step>
        <Step Title="步骤三" Space="25%" Status="StepStatus.Error" StepIndex="2"></Step>
        <Step Title="步骤四" Space="25%" Status="StepStatus.Finish" StepIndex="3"></Step>
        <Step Title="步骤五" Space="25%" StepIndex="4" IsLast="true"></Step>
    </Steps>
</Block>

<Block Title="有描述的步骤条" Introduction="每个步骤有其对应的步骤状态描述" CodeFile="step.3.html">
    <Steps>
        <Step Title="步骤一" Space="33.33%" Status="StepStatus.Finish" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤二" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤三" Space="33.33%" StepIndex="3" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤四" Space="33.33%" StepIndex="4" IsLast="true" Description="结束语"></Step>
    </Steps>
</Block>

<Block Title="居中的步骤条" Introduction="标题和描述都将居中" CodeFile="step.4.html">
    <Steps IsCenter="true">
        <Step Title="步骤一" Space="33.33%" Status="StepStatus.Finish" StepIndex="0" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤二" Space="33.33%" Status="StepStatus.Success" StepIndex="1" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤三" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤四" Space="33.33%" StepIndex="3" IsLast="true" Description="结束语"></Step>
    </Steps>
</Block>

<Block Title="带图标的步骤条" Introduction="步骤条内可以启用各种自定义的图标" CodeFile="step.5.html">
    <Steps IsCenter="true">
        <Step Title="步骤一" Space="33.33%" IsIcon="true" Icon="fa fa-user" Status="StepStatus.Success" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤二" Space="33.33%" IsIcon="true" Icon="fa fa-user-plus" Status="StepStatus.Process" StepIndex="1" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤三" Space="33.33%" IsIcon="true" Icon="fa fa-users" StepIndex="2" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤四" Space="33.33%" IsIcon="true" Icon="fa fa-user-secret" StepIndex="3" IsLast="true" Description="结束语"></Step>
    </Steps>
</Block>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Title="StepItem 属性" Items="@GetStepItemAttributes()" />

<EventTable Items="@GetEvents()" />